<template>
  <section>
    <el-row v-if="model === 'cascader'">
      <el-cascader :placeholder="title" :options="list"  @change="handleChange" :props="props" v-if="list" size="mini"
                   :show-all-levels="showAll"  clearable :change-on-select="changeOn">
      </el-cascader>
    </el-row>
    <el-row v-else-if="model === 'select'">
      <el-select size="mini" :placeholder="title" @change="handleSel" v-model="selOption" clearable>
        <el-option  v-for="l in list" :key="l.id" :value="l.id" :label="l[test]"></el-option>
      </el-select>
    </el-row>
    <div v-else-if="model === 'selMember'">
      <el-select clearable v-model="selOption" :filterable="true" remote clearable
                 :reserve-keyword="false" default-first-option  placeholder="请输入姓名"
                 :remote-method="remoteMethod" size="mini" @change="handleSel">
        <el-option v-for="user in list" :key="user.id" :label="user.userName" :value="user.id">
          <span style="float: left">{{ user.userName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ user.phone }}</span>
        </el-option>
        <el-pagination mini layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
      </el-select>
    </div>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "filterTool",
    props:['type','test','listtest'],
    data(){
      return{
        title:'默认',
        list:null,
        props:null,
        selOption:null,
        model:'select',
        showAll:true,
        changeOn:true,
        totalPage:0
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{
    },
    created() {
      if(this.type === 'companyId'){
        this.title='公司'
        this.getCompanyList()
      }else if(this.type === 'departmentId'){
        this.title='部门'
        this.getDepartmentList()
      }else if(this.type === 'categoryId'){
        this.title='产品分类'
        this.model = 'cascader'
        this.getProductCategoryList()
      }else if(this.type ==='goodsTypeId'){
        this.title='商品分类'
        this.getMallGoodsTypeList()
      }else if(this.type ==='state'){
        this.title='商品状态'
        this.list=[
          {name:'未操作',id:0},
          {name:'已上架',id:1},
          {name:'已下架',id:2}
        ]
      }else if(this.type === 'stockInTypeId'){
        this.title='入库类型'
        this.getStockInTypeList()
      }else if(this.type === 'godownEntryState'){
        this.title='入库单状态'
        this.list=[
          {name:'未入库',id:1},
          {name:'已入库',id:2},
        ]
      }else if(this.type === 'stockOutTypeId'){
        this.title='出库类型'
        this.getStockOutTypes()
      }else if(this.type === 'outboundState'){
        this.title='出库单状态'
        this.list=[
          {name:'未出库',id:1},
          {name:'处理中',id:2},
          {name:'已出库',id:3},
        ]
      }else if(this.type === 'memberId'){
        this.title='用户'
        this.model = 'selMember'
      }else if(this.type === 'orderState'){
        this.title='订单状态'
        this.list=[
          {name:'待支付',id:0},
          {name:'已支付',id:1},
          {name:'已取消',id:2},
          {name:'已完成',id:4},
        ]
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      handleChange(e){
        console.log('选择器----',e)
        setTimeout(()=>{
          let tmp={}
          tmp[this.type]=e[e.length-1]
          this.$emit('confirm',tmp)
        },1000)
      },
      handleSel(e){
        console.log('选择框---',e)
        if(e === ''){
          e = undefined
        }
        let tmp={}
        tmp[this.type]=e
        this.$emit('confirm',tmp)
      },
      getCompanyList(){
        this.fetch({name:"getCompanyList"})
          .then(res=>{
            console.log('公司列表-------------------------',res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDepartmentList(){
        this.fetch({name:"getCompanyList"})
          .then(res=>{
            console.log('公司列表--------',res)
            this.list=[]
            this.getDepartmentByCompany(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDepartmentByCompany(array){
        this.fetch({name:"getDepartmentList",data:{companyId:array[0].id}})
          .then(res=>{
            if(res.length>0){
              let tmp={name:array[0].companyName,childrens:res,id:array[0].id}
              this.list.push(tmp)
            }
            array.splice(0,1)
            if(array.length<=0){
              this.props={
                children: 'childrens',
                label: 'name',
                value:'id'
              }
              this.model = 'cascader'
              this.showAll=false
              this.changeOn=false
              console.log('部门列表--------',res)
            }else {
              this.getDepartmentByCompany(array)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getProductCategoryList(){
        this.fetch({name:"getProductCategoryList"})
          .then(res=>{
            console.log(res)
            this.list=res
            this.props={
              children: 'childrens',
              label: 'name',
              value:'id'
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getMallGoodsTypeList(){
        this.fetch({name:"getMallGoodsTypeList",data:{storeId:this.department.id}})
          .then(res=>{
            console.log(res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStockInTypeList(){
        this.fetch({name:"getStockInTypes"})
          .then(res=>{
            console.log('入库类型',res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStockOutTypes(){
        this.fetch({name:"getStockOutTypes"})
          .then(res=>{
            console.log('出库类型',res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      goPage(val){
        this.remoteMethod(val-1)
      },
      remoteMethod(keywords) {
        if(keywords === '' || !keywords){//关键词为空或没有输入
          this.list=[]
          return
        }
        this.fetch({name:"getMembers",data:{keywords}})
          .then(res=>{
            console.log('看下数量---------',res)
            this.list=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>
  .options-box{
    display: flex;
    flex-direction: column;
    border: 0px solid red;
  }
  .options{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>
